<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="progress-bar" style="background: lightblue;width:0px;height: 20px"></div>
<button id="btn">开始</button>
<script>
  /**
   * requestAnimationFrame(callback) 由浏览器专门为动画提供的API
   * cancelAnimationFrame(返回值) 清除动画
   */
  // 页面上绘制一个进度条 0%->100%

  const btn = document.getElementById('btn');
  const div = document.getElementById('progress-bar');
  let start;

  function progress(DOMHighResTimeStamp){
    console.log('DOMHighResTimeStamp:',DOMHighResTimeStamp);
    /** 关于回到函数接受的参数 DOMHighResTimeStamp
      DOMHighResTimeStamp指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。
      在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。
      该时间戳是一个十进制数，单位毫秒，最小精度为1ms(1000μs)

      emmm... 说人话 打开控制台查看打印 可以发现第一条 DOMHighResTimeStamp 基本和脚本从运行开始到第一次调用requestAnimationFrame的时间一致
    */


    div.style.width = div.offsetWidth + 1 + 'px';
    div.innerHTML = (div.offsetWidth) + '%';
    if (div.offsetWidth < 100) {
      const current = Date.now();
      // 假如说浏览器本身的任务
      console.log(current - start);
      start = current;
      const timer = requestAnimationFrame(progress);
      console.log('timer:',timer);
      // window.cancelAnimationFrame(timer)
    }
  }

  btn.addEventListener('click', () => {
    div.style.width = 0; // 先把宽度清除
    const current = Date.now();
    start = current;
    requestAnimationFrame(progress);
  });
</script>
</body>
</html>
